<template>
  <div o-Container>
    <!-- 图片上传组件辅助，组件内添加v-show=“false”属性，把该组件隐藏起来。-->
    <el-upload
      class="avatar-uploader"
      :class="refInput"
      action="#"
      name="img"
      :ref="refInput"
      :show-file-list="false"
      :on-change="uploaderChange"
      :before-upload="beforeUpload"
    >
    </el-upload>
    <quill-editor
      v-model="content"
      :ref="refName"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
      @ready="readyOlist"
      :key="refName"
    >
    </quill-editor>
  </div>
</template>
<script>
//引入Qill插件
import Quill from "quill";
// // 自定义字体
// let fontFamily = ["宋体", "黑体", "微软雅黑", "楷体", "仿宋", "Arial", "苹方"];
// Quill.imports["attributors/style/font"].whitelist = fontFamily;
// Quill.register(Quill.imports["attributors/style/font"]);
// 自定义文字大小
let fontSize = ["10px", "12px", "14px", "16px", "20px", "24px", "36px"];
Quill.imports["attributors/style/size"].whitelist = fontSize;
Quill.register(Quill.imports["attributors/style/size"]);
Quill.register(fontSize, true);
export default {
  name:
    "quill_editor" /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */,
  props: {
    octopus: {
      type: Object,
      default: {}
    },
    desc: {
      type: String,
      default: ""
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    refName: {
      type: String,
      default: "myQuillEditor"
    },
    refInput: {
      type: String,
      default: "refInput"
    }
  },
  watch: {
    desc: {
      handler(val) {
        this.content = val;
      },
      immediate: true,
      deep: true
    },
    isEdit: {
      handler(e) {
        setTimeout(() => {
          // this.$refs[this.refName].quill.blur();
          // !e && this.$refs[this.refName].quill.enable(true);
          // e && this.$refs[this.refName].quill.enable(false);
        }, 600);
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      // octopus: this.$parent.octopus,
      content: ``, //双向数据绑定数据
      editorOption: {
        // 占位配置
        placeholder: "请输入...",
        height: "18.75rem",
        modules: {
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
              ["blockquote", "code-block"], // 引用  代码块
              [{ size: fontSize }],
              [{ header: 1 }, { header: 2 }], // 1、2 级标题
              [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
              [{ script: "sub" }, { script: "super" }], // 上标/下标
              [{ indent: "-1" }, { indent: "+1" }], // 缩进
              [{ direction: "rtl" }], // 文本方向
              ["link", "image", "video"], // 链接、图片、视频
              [{ align: [] }], // 添加居中按钮
              [{ color: [] }] // 文字颜色按钮
            ],
            handlers: {
              image: value => {
                if (value) {
                  // 调用element的图片上传组件
                  document.querySelector(`.${this.refInput} input`).click();
                } else {
                  this.quill.format("image", false);
                }
              }
            }
          },
          // 更改插入的图片大小
          imageResize: {
            displayStyles: {
              backgroundColor: "black",
              border: "none",
              color: "white"
            },
            modules: ["Resize", "DisplaySize", "Toolbar"]
          }
        }
      },
      name: "",
      toeval: ""
    };
  },
  created() {
    this.$nextTick(() => {
      this.$refs[this.refName].quill.enable(false);
      setTimeout(() => {
        this.$refs[this.refName].quill.blur();
        this.$refs[this.refName].quill.enable(true);
      }, 500);
    });
  },
  methods: {
    readyOlist(e) {},
    onEditorBlur() {}, // 失去焦点触发事件
    onEditorFocus() {}, // 获得焦点触发事件
    onEditorChange() {
      this.$emit("quillContent", this.content);
    }, // 内容改变触发事件
    uploaderChange(file, fileList, callback) {
      if (file.status !== "ready") return;
      // 获取富文本组件实例
      let quill = this.$refs[this.refName].quill;
      let o = this;
      this.octopus.request.api.upload(
        file.raw,
        () => {},
        fileData => {
          if (fileData.status.code == 200) {
            // 获取光标所在位置
            let length = quill.getSelection().index;

            // 插入图片，res为服务器返回的图片链接地址
            quill.insertEmbed(
              length,
              "image",
              o.octopus.config.url + fileData.content.url
            );
            // 调整光标到最后
            quill.setSelection(length + 1);
          }
        }
      );
    }
  }
};
</script>
<style scoped>
>>> .ql-container {
  font-size: 16px;
  height: 40rem;
}
</style>
<style>
.ql-snow .ql-picker {
  display: flex;
}
.ql-snow .ql-picker.ql-size {
  width: 70px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label {
  line-height: 20px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
  content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
  content: "12px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
  content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
  content: "16px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
  content: "20px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
  content: "24px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36px"]::before {
  content: "36px";
}
</style>
